<!-- @author zhengjie -->
<template>
  <div>
    <treeselect
      class="ipt"
      v-model="newValue"
      :options="options"
      :show-count="true"
      :clearable="false"
      placeholder="请选择部门"
      :normalizer="normalizer"
    />
  </div>
</template>
    
    <script>
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

export default {
  name: "deptItem",
  props: {
    value: {
      type: String | Number | undefined,
      default: () => {
        return undefined;
      },
    },

    options: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {
    Treeselect,
  },

  data() {
    return {
      newValue: "",
    };
  },

  watch: {
    value: {
      immediate: true,
      handler(newValue, oldValue) {
        this.newValue = newValue;
      },
    },

    newValue: "changeDepid",
  },

  methods: {
    changeDepid() {
      this.$emit("change", this.newValue);
    },

    normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.children,
      };
    },
  },
};
</script>
    
    <style rel="stylesheet/scss" lang="scss" scoped>
</style>
    